<template>
	<div class="app-container">
		<jk-operation-card ref="box1" class="margin-bottom-10">
			<div ref="box1" class="flex-between-center-wrap">
				<div class="flex-start-center-wrap">
					<jk-add-button :permission-prefix="prefix" class="margin-5-0 item-gap" @click="onAddBtn"></jk-add-button>
				</div>
				<div class="flex-end-center-wrap">
					<jk-select v-model="searchParams.type" :option-list="noticeTypeList" placeholder="通知类型" class="search-bar-item-size2 item-gap margin-5-0" size="small" clearable></jk-select>
					<jk-search-input v-model="searchParams.title" size="small" class="search-bar-item-size4 item-gap margin-5-0" placeholder="标题" clearable @clear="onSearchBtn" @keyup.enter.native="onSearchBtn" />
					<jk-search-button @click="onSearchBtn"></jk-search-button>
				</div>
			</div>
		</jk-operation-card>
		<jk-card class="margin-top-10">
			<jk-table
				ref="jkTable"
				:loading="tableLoading"
				:data="tableData"
				:height="tableHeight + 20"
				:row-style="rowClassName"
			>
				<vxe-column
					v-for="(item, index) in tableColumnList"
					:key="index"
					:title="item.title"
					:align="item.align"
					:field="item.keyName"
					:sortable="item.sortable"
					:fixed="item.fixed ? item.fixed : ''"
					:min-width="item.minWidth"
					:width="item.width"
				>
					<template slot-scope="scope">
						<jk-state-bar v-if="item.keyName === 'type'" color="inherit" :show-icon="true" :state="scope.row.type" :state-list="noticeTypeList"></jk-state-bar>
						<jk-state-bar v-else-if="item.keyName === 'noticeObjectId'" color="inherit" :show-icon="false" :state="scope.row.noticeObjectId" :state-list="noticeTargetCategoryList"></jk-state-bar>
						<span v-else-if="item.keyName === 'noticeBeCurrentList'">{{ scope.row.noticeTargetCategoryList ? scope.row.noticeTargetCategoryList.map(x => x.name).join() : '' }}</span>
						<span v-else-if="item.keyName === 'ifTopped'">{{ scope.row.ifTopped ? '是' : '否' }}</span>
						<div v-else-if="item.keyName === 'title'" style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
							<span>{{ scope.row.title }}</span>
							<el-tag v-if="scope.row.ifTopped" type="danger" class="margin-left-10" size="mini">已置顶</el-tag>
						</div>
						<div v-else-if="item.keyName === 'content'" style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ scope.row.content }}</div>
						<span v-else>{{ scope.row[item.keyName] }}</span>
					</template>
				</vxe-column>
				<vxe-column title="操作" align="center" fixed="right" :width="250">
					<template slot-scope="scope">
						<div class="flex-center">
							<jk-delete-button class="item-gap" :permission-prefix="prefix" @on-confirm="onDeleteBtn(scope.row)"></jk-delete-button>
							<jk-button v-if="scope.row.ifTopped" :has-permission="getPermission(['system:notice:update'])" type="warning" size="mini" class="item-gap" icon="el-icon-circle-close" @click="onUnTopBtn(scope.row)">撤销</jk-button>
							<jk-button v-else :has-permission="getPermission(['system:notice:update'])" type="success" size="mini" class="item-gap" icon="el-icon-upload2" @click="onTopBtn(scope.row)">置顶</jk-button>
							<jk-edit-button :permission-prefix="prefix" @click="onEditBtn(scope.row)"></jk-edit-button>
						</div>
					</template>
				</vxe-column>
			</jk-table>
			<footer ref="box2" class="flex-end-center margin-top-10">
				<jk-page
					:page-index="searchParams.pageNo"
					:page-sizes="searchParams.pageSizes"
					:page-size="searchParams.pageSize"
					:total="searchParams.count"
					@on-change="onPageChange"
				/>
			</footer>
		</jk-card>

		<saveDialog
			:dialog-state="saveDialogState"
			:data-id="dataId"
			@on-visible-change="onVisibleChange"
			@on-confirm="onConfirm"
		></saveDialog>
	</div>
</template>

<script>
    import calHeight from '../../../mixins/cal-table-height';
    import { pageConfig } from '../../../utils/jk/jk-tool';
    import handlerCache from '../../../mixins/handler-cache';
    import getMenuColumn from '../../../mixins/getMenuColumn';
    import saveDialog from './save-dialog';
    import {
        systemNoticeClearTopped,
        systemNoticeDelete,
        systemNoticePage,
        systemNoticeTopped
    } from '../../../api/system/notice';
    import { noticeTargetCategoryList, noticeTypeList } from '../../../utils/jk/status-option-list';
    import permissionMixin from '../../../mixins/permission-mixin';
    export default {
        name: 'Notice',
        mixins: [calHeight, handlerCache, getMenuColumn, permissionMixin],
        components: { saveDialog },
        data() {
            return {
                prefix: 'system:notice',
                noticeTypeList: noticeTypeList,
                noticeTargetCategoryList: noticeTargetCategoryList,
                dataId: null,
                tableLoading: true,
                showSearch: true,
                total: 0,
                tableData: [],
                saveDialogState: false,
                searchParams: {
                    count: 0,
                    pageNo: pageConfig.pageNo,
                    pageSize: pageConfig.pageSize,
                    title: undefined,
                    status: undefined
                }

            };
        },
        methods: {
            rowClassName({ row }) {
                let styleConfig = {};
                if (row.ifExpired) {
                    styleConfig = {
                        backgroundColor: '#f8f8f9',
                        color: '#808695'
                    };
                } else {
                    styleConfig = {
                        backgroundColor: '',
                        color: ''
                    };
                }
                return styleConfig;
            },
            onUnTopBtn(row) {
                this.$confirm('确认取消置顶吗?', { type: 'warning' }).then(() => {
                    return systemNoticeClearTopped({ id: row.id });
                }).then(() => {
                    this.getListRequest();
                    this.$tipsBar(this, 'operation');
                }).catch(() => {});
            },
            onTopBtn(row) {
                this.$confirm('确认置顶吗?', { type: 'warning' }).then(() => {
                    return systemNoticeTopped({ id: row.id });
                }).then(() => {
                    this.getListRequest();
                    this.$tipsBar(this, 'operation');
                }).catch(() => {});
            },
            onConfirm() {
                this.saveDialogState = false;
                this.getListRequest();
            },
            onVisibleChange(e) {
                this.saveDialogState = e;
            },
            clearCacheMethod() {
                // Object.assign(this.$data, this.$options.data());
                this.$nextTick(() => {
                    this.getDependentData();
                });
            },
            onPageChange(pageIndex, pageSize) {
                this.searchParams.pageNo = pageIndex;
                this.searchParams.pageSize = pageSize;
                this.getListRequest();
            },
            getListRequest() {
                this.tableLoading = true;
                systemNoticePage(this.searchParams).then(res => {
                    this.tableData = res.data.res;
                    this.searchParams.count = res.data.count;
                    this.tableLoading = false;
                });
            },
            /** 搜索按钮操作 */
            onSearchBtn() {
                this.searchParams.pageNo = 1;
                this.getListRequest();
            },
            /** 新增按钮操作 */
            onAddBtn() {
                this.dataId = null;
                this.saveDialogState = true;
            },
            /** 修改按钮操作 */
            onEditBtn(row) {
                this.dataId = row.id;
                this.saveDialogState = true;
            },

            /** 删除按钮操作 */
            onDeleteBtn(row) {
                const ids = row.id || this.ids;
                systemNoticeDelete({ id: row.id }).then(() => {
                    this.getListRequest();
                    this.$tipsBar(this, 'delete');
                }).catch(() => {});
            },
            async getDependentData() {
                await this.getMenuColumnListRequest();
                await this.getListRequest();
            }
        },
        mounted() {
            this.getDependentData();
        }
    };
</script>
